<template>
    <div  >
        <Header></Header>
        <div class="top">
      <ul class="nav">
        <li class="title">主题市场</li>
        <li>女装/内衣/家居</li>
        <li>女鞋/男鞋/箱包</li>
        <li>母婴/童装/玩具</li>
        <li>男装/运动户外</li>
        <li>美妆/彩妆/个护</li>
        <li>手机/数码/企业</li>
        <li>零食/生鲜/茶酒</li>
        <li>厨具/收纳/清洁</li>
        <li>家纺/家饰/鲜花</li>
        <li>图书音像/文具</li>
        <li>医药保健/进口</li>
        <li>汽车/二手车/用品</li>
      </ul>
      <div class="banner">
        <ul class="list" id="banner_list">
          <li
            :style="item.id == swiperId ? 'display:block;' : ''"
            v-for="item in swiperlist"
            :key="item.id"
          >
            <img :src="item.imgurl" alt="" />
          </li>
        </ul>
        <ul class="dot_list" id="dot_list">
          <li
            @click="changeBanner(item.id)"
            v-for="item in swiperlist"
            :key="item.id"
          >
            {{ item.id }}
          </li>
        </ul>
      </div>
    </div>

    <!-- 如果希望能够显示多个组件，需要使用v-for指令，在组件上面使用v-for，
    有点特殊，需要使用v-bind指令，绑定key属性，key属性可以放索引
    不然会报错，即  :key='index' -->
    <div class="chanpin_list">
      <Product
        v-for="(item, index) in productlist"
        :key="index"
        :product="item"
      />
    </div>
        
    </div>
</template>

<script>
import Header from "../components/BBSHeader.vue"

    export default {
        name: "BBSHome",
        
        components: {
            Header,
            
        },
        data: function () {
    return {
      // 第一张轮播图
      swiperId: 1,
      //轮播图的图片
      swiperlist: [
        {
          id: 1,
          imgurl:
            "https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/100014359257/FocusFullshop/CkRqZnMvdDEvMTEwNDY0LzEzLzE3Nzc1LzI4OTczMS82MTRiODgwYUUwNDk4N2IxNC82OWE1M2NiY2MwMjlmYjEzLnBuZxIJMy10eV8wXzU0MAI47ot6QhQKEE9QUE_lubPmnb_nlLXop4YQAEIPCgs1NeaKmOenkuadgBABQhAKDOeri-WNs-aKoui0rRACQgoKBuS8mOi0qBAHWNmFyMr0Ag/cr/s/q.jpg",
        },
        {
          id: 2,
          imgurl:
            "https://img14.360buyimg.com/pop/s1180x940_jfs/t1/209750/8/10660/52806/61a09fb6Ec2fb8b05/ebbcd46963b7107d.jpg.webp",
        },
        {
          id: 3,
          imgurl:
            "https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/10025946402575/FocusFullshop/CkNqZnMvdDEvMjA0OTAwLzI4LzY3MDEvNDAyOTY5LzYxNDFiOTM0RTg4N2M0YzI2L2JiOGFiZjUyMTA5ZTRkODEucG5nEgk0LXR5XzBfNTUwAjjui3pCFgoS6IGU5oOz5bmz5p2_55S16ISREABCEQoN56eS5p2A5Lu3Mjk0ORABQhAKDOeri-WNs-aKoui0rRACQgoKBuWKm-iNkBAHWI-e5cflowI/cr/s/q.jpg",
        },
        {
          id: 4,
          imgurl:
            "https://imgcps.jd.com/ling4/4137007/54iG5qy-55u06ZmN/6YOo5YiG5q-P5ruhMTk55YePMTAw/p-5bd8253082acdd181d02fa50/87ef3624/cr/s/q.jpg",
        },
      ],
     
    };
  },
  //created是Vue的声明周期钩子，表示创捷结束之后要执行的函数，该函数会自动执行，通常使用
  //该函数实现请求数据的方法的调用
  created: function () {
    // console.log('111');
   
    setInterval(() => {
      this.autoSwiper();
    }, 2000);
  },
  methods: {
    
    changeBanner(id) {
      this.swiperId = id;
    },
    // 自动轮播
    autoSwiper() {
      let nowId = this.swiperId;
      if (nowId == this.swiperlist.length) {
        this.swiperId = 1;
      } else {
        this.swiperId = this.swiperId + 1;
      }
    },
  },
};

    
</script>

<style scoped>
.top {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  margin: auto;
  padding-top: 30px;
}
.top .nav {
  width: 200px;
}
.top .nav .title {
  color: orange;
  font-weight: bold;
}
.top .nav li {
  font-size: 14px;
  line-height: 35px;
  list-style-type: none;
  cursor: pointer;
  color: #333;
}
.top .banner {
  position: relative;
  width: 100%;
  height: 450px;
  overflow: hidden;
  border-radius: 4px;
}
.top .banner .list li {
  display: none;
}
.top .banner .dot_list {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}
.top .banner .list img {
  width: 100%;
}
.top .banner .dot_list li {
  display: inline-block;
  width: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 100%;
  font-size: 12px;
  margin: 0 10px;
  cursor: pointer;
  border: 1px #dbdbdb solid;
}
.top .banner .dot_list li:hover {
  background: #999;
}
.chanpin_list{  width:1200px;
margin:auto;
display: flex; 
justify-content: space-between;
flex-wrap: wrap;}
</style>